<template>
  <div class='deatils' v-if="datalist" :key="datalist.friend_status">
    <header>
    <van-sticky>
      <div class="header" :style=" {backgroundImage:'url('+datalist.poi_info.head_pic_url+')'}">
     <i class="iconfont" @click="$router.push('/home')" >&#xe624;</i>
</div>

     <div class="title hidden"  >
         <img :src="datalist.poi_info.pic_url" alt="" style="float:right;">
         <p class="desc">{{datalist.poi_info.name}}</p>
           <van-tag type="primary"  text-color="red" color="#fff" v-for="data in datalist.label_map['2']" :key="data">{{data}}</van-tag>
           <p class="total van-ellipsis ">公告 :{{datalist.poi_info.bulletin}}</p>
     </div>
     </van-sticky>
   <div class="search">
         <van-tabs >
  <van-tab title="点菜" to='/details/sub/0'></van-tab>
  <van-tab title="评价" to="/details/sub2"></van-tab>
  <van-tab title="商家" to="/details/sub2"></van-tab>
</van-tabs>
</div>
</header>
   <div class="right">
     <router-view></router-view>
   </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'deatils',
  data () {
    return {

      isActive: true,
    }
  },
  created () {
    // this.$store.dispatch('getlist')
    this.$toast({
      message: '加载中...',
      duration: 500,
    })
    // this.getlist()
    console.log('成公')
  },
  computed: {
    ...mapState({
      datalist: state => state.deatilslist.datalist,

    }),
  },
  methods: {
    ...mapMutations(['clear']),
  },
  destroyed () {
    console.log('销毁了')
    this.clear()
  },

}
</script>

<style lang='less' scoped>
@font-face {
  font-family: 'iconfont';  /* Project id 2953455 */
  src: url('//at.alicdn.com/t/font_2953455_bfsz1ysd33o.woff2?t=1637840756839') format('woff2'),
       url('//at.alicdn.com/t/font_2953455_bfsz1ysd33o.woff?t=1637840756839') format('woff'),
       url('//at.alicdn.com/t/font_2953455_bfsz1ysd33o.ttf?t=1637840756839') format('truetype');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:24px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
  }
.header{
 height: 170px;
    position: relative;
    z-index: 1;
    background: linear-gradient(rgba(34, 36, 38, 0.5), rgba(34, 36, 38, 0.5)) center top / cover no-repeat;
    i{
        position: absolute;
        left: 20px;
        top: 20px;

    }
}
.title{
width: 100%;
    border-radius: 40px 0 40px 0;
    background: #fff;
    padding-top: 20px;
    .desc{
        font-size: 18px;
        text-align: left;
        margin-left: 20px;

    }
    .total{
      width: 100%;
      font-size: 16px;
      margin-left: 14px;
    }
    img{
      width:140px;
      height: 110px;
    }
}
.hidden {
  overflow: hidden;
  height: 200px;
}

.van-field__control{
  width: 50px;
}
header{
  position: relative;
}
</style>
